﻿<div class="row-fluid">
    <div class="col-md-8" style="position:relative;">
        <div ng-show="analystView.keyEsgIssueValues.length == 0">
            There are no key ESG issues for this company.
        </div>
        <div class="sustainalyticsBlockui" isvisible="analystView.industryOverviewChartIsLoading"></div>
        <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" class="sustainalytics-chart-xy" useroptions="analystView.keyEsgIssueValuesXyChartOptions"
             isloading="analystView.industryOverviewChartIsLoading"></div>
    </div>
    <div class="col-md-4"><br /><br />
        <ul class="graph-legend">
            <li ng-repeat="val in analystView.keyEsgIssueValues">
                <div class="graph-legend-bullet" ng-class="{ grey: !val.keyEsgIssue.selected, green: val.keyEsgIssue.selected }">{{ val.letter }}</div>
                <div class="graph-legend-text" ng-class="{ green: val.keyEsgIssue.selected }">{{ val.keyEsgIssue.name }}</div>
                <div class="clear">&nbsp;</div>
            </li>
        </ul>
        <div class="clear"></div><br /><br />
        <ul class="graph-legend">
            <li>
                <div class="graph-legend-bullet green" ng-show="analystView.keyEsgIssueValues.length > 0"></div>
                <div class="graph-legend-text"><b style="color: #808080" ng-show="analystView.keyEsgIssueValues.length > 0">= Key ESG issue</b></div>
                <div class="clear">&nbsp;</div>
            </li>
        </ul><br />
        <!--<ul class="graph-legend">
            <li>
                <div class="graph-legend-bullet green"></div>
                <div class="graph-legend-text"><b style="color: #808080">= Exposure dependent key ESG issue</b></div>
                <div class="clear">&nbsp;</div>
            </li>
        </ul>-->
    </div>
    <div class="clear"></div>
</div>